import React from "react";
import { Form, Input, Button, Select, message as antdMessage } from "antd";
import axios from "axios";
const Index: React.FC = () => {
  const onFinish = async (value: any) => {
    const resp = await axios.post("/list", value);
    const { code, message } = resp.data;
    if (code === 200) {
      antdMessage.success(message);
    }
  };
  return (
    <div>
      <Form
        initialValues={{ type: "羊毛衫" }}
        labelCol={{ span: 2 }}
        wrapperCol={{ span: 20 }}
        onFinish={onFinish}
      >
        <Form.Item
          label="昵称"
          name="nickname"
          rules={[
            {
              required: true,
              message: "不可以为空",
            },
          ]}
        >
          <Input></Input>
        </Form.Item>
        <Form.Item
          label="电话"
          name="tel"
          rules={[
            {
              required: true,
              message: "不可以为空",
            },
            {
              validator(_, value) {
                if (/^1[3-9]\d{9}$/g.test(value)) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error("手机号格式不正确"));
              },
            },
          ]}
        >
          <Input></Input>
        </Form.Item>
        <Form.Item
          label="地址"
          name="address"
          rules={[
            {
              required: true,
              message: "不可以为空",
            },
          ]}
        >
          <Input></Input>
        </Form.Item>
        <Form.Item
          label="类型"
          name="type"
          rules={[
            {
              required: true,
              message: "不可以为空",
            },
          ]}
        >
          {/* ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] */}
          <Select
            options={[
              {
                value: "衬衫",
                label: "衬衫",
              },
              {
                value: "羊毛衫",
                label: "羊毛衫",
              },
              {
                value: "雪纺衫",
                label: "雪纺衫",
              },
              {
                value: "裤子",
                label: "裤子",
              },
              {
                value: "高跟鞋",
                label: "高跟鞋",
              },
              {
                value: "袜子",
                label: "袜子",
              },
            ]}
          ></Select>
        </Form.Item>
        <Form.Item wrapperCol={{ span: 20, offset: 2 }}>
          <Button type="primary" block htmlType="submit">
            添加
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default Index;
